<template>
  <div class="app-container">
    <div class="flex-box">
      <div class="item">
        <el-input v-model="searchcontent" placeholder="请输入用户联系方式" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </div>

      <!-- <div class="item">
        <el-input v-model="searchuid" placeholder="请输入用户ID" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </div> -->

      <div class="item">
        <el-select v-model="status" placeholder="请选择充值状态" @change="getList">
          <el-option
            :key="0"
            label="全部状态"
            :value="null"
          />
          <el-option
            v-for="item in statuslist"
            :key="item.val"
            :label="item.lab"
            :value="item.val"
          />
        </el-select>
      </div>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" class="no-r-b"
      :header-cell-style="{background:'#FAFAFA',color:'#666666'}">
      <el-table-column align="center" label="ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户名称">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="积分交易量">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户电话">
        <template slot-scope="scope">
          <span>{{ scope.row.contact }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户邮箱">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="交易状态">
        <template slot-scope="scope">
          <span>{{
            scope.row.status == 1 ? '待交易' :
            scope.row.status == 2 ? '成功' :
            scope.row.status == 3 ? '取消' : '未支付'
           }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="交易类型">
        <template slot-scope="scope">
          <span>
            {{ scope.row.transtype == 1 ? '积分兑换' : '反馈积分' }}
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="交易后剩余积分">
        <template slot-scope="scope">
          <span>{{ scope.row.coin }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="cageSetShow(scope.row)">审核</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination v-if="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!-- <el-dialog title="审核" :visible.sync="dialogCageVisible">
      开始审核
      <el-button @click="sumbit(2)">
        通过
      </el-button>

      <el-button @click="sumbit(3)">
        拒绝
      </el-button>
    </el-dialog> -->
  </div>
</template>

<script>
  import { getJfen } from "@/api/cume"
  import Pagination from '@/components/Pagination'
  export default {
    name: 'JfenList',
    components: { Pagination },
    data() {
      return {
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20
        },
        searchcontent: '',
        status: null,
        statuslist: [
          {val: 1,lab: '待交易'},
          {val: 2,lab: '成功'},
          {val: 3,lab: '取消'}
        ],
        searchuid: null,
        dialogCageVisible: false,
        selectId: null
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        const search = { searchcontent: this.searchcontent, status: this.status, uid: this.searchuid }
        const postdata = { ...this.listQuery, ...search }
        getJfen(postdata).then((response) => {
          const { data } = response
          console.log(response, 'getOrder')
          this.list = data.list
          this.total = data.total
          this.listLoading = false
        })
      },
      cageSetShow(row) {
        this.dialogCageVisible = true
        this.selectId = row.id
      },
      sumbit(val) {
        cageSet({id: this.selectId, status: val}).then(res=>{
          if(res.code == 0) {
            if(val == 2){
              this.$message({
                type: 'success',
                message: '审核通过'
              })
            }else{
              this.$message({
                type: 'success',
                message: '审核拒绝'
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .app-container{
    .search{
      width: 400px;
      margin-bottom: 20px
    }
  }
  .left-s .el-input {
    width: 110px;
  }
  .input-with-select .el-input-group__prepend {
    // background-color: #fff;
  }
</style>
